<template>
    <!--最大div-->
    <div style="margin-top: -10px">
        <!--新建栏-->
        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white;margin-top: 10px;height: 40px">
            <el-row :gutter="24">
                <el-col :span="18">
                    <span style="font-size: 18px;line-height:40px;margin-left: 5px">产品类别</span>
                </el-col>
                <el-col :span="6">
                    <el-button size="small"  @click="dialogAormVisible = true" type="primary">新建类别</el-button>
                </el-col>
                <el-dialog title="新增类型名" :visible.sync="dialogAormVisible" width="30%" >
                    <el-form :model="leibiexz">
                        <el-form-item label="上级名称：" :label-width="formLabelWidth"  prop="cplx">
                            <el-select
                                    v-model="op"
                                    value-key="typeId"
                                    placeholder="请选择"
                                    style="width: 232px;"
                                    @change=mm>
                                <el-option
                                        v-for="item in qtypei"
                                        :key="item.typeId"
                                        :label="item.typeName"
                                        :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="新增类型名：" :label-width="formLabelWidth" prop="sxm"  style="width: 352px;">
                            <el-input v-model="leibiexz.typeName" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button >取 消</el-button>
                        <el-button type="primary" @click="lbxz">确 定</el-button>
                    </div>
                </el-dialog>
            </el-row>
        </div>
        <!--表格数据框-->
        <el-row style="margin-top: 10px;border: 1px solid #BFBFBF;background-color: #BFBFBF">
            <el-col :span="12" >
                <el-tree
                        style="width: 633px;height: 500px"
                        :data="myleixinqx"
                        node-key="id"
                        :props="defaultProps"
                        :expand-on-click-node="false">
                      <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span>
                          <el-button
                                  type="text"
                                  size="mini"
                                  @click="() => append(data)">
                            修改类别
                          </el-button>
                          <el-button
                                  type="text"
                                  size="mini"
                                  @click="() => remove(node, data)">
                            删除类别
                          </el-button>
                        </span>
                      </span>
                </el-tree>
            </el-col>
            <el-col :span="12">
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%;height: 500px">
                    <el-table-column
                            prop="id   "
                            label="ID">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="规格值"
                    >
                    </el-table-column>
                </el-table >
            </el-col>
        </el-row>
        <!--分页框-->
    </div>
</template>

<script>
    export default {
        name: "Qcpleibie",
        data() {
            return {
                op: '',
                qtypei:[],
                leibiexz:{
                    parendtId:'',
                    categoryLevel:''
                },
                formLabelWidth: '120px',
                formaa:{},
                dialogAormVisible: false,
                myleixinqx: [],
                defaultProps:{
                    value:'typeid',
                    label:'typeName',
                    children:'functionTypes',
                },
                tableData:[],

            }
        },
        created:function() {
            this.leibie();
            this.leibiee();
        },
        methods: {
            lbxz(){
                this.dialogAormVisible = false;
                this.$axios.post("http://localhost:8088/par/addleix",
                    this.leibiexz).then(()=>{
                    this.$message({
                        message: '新增成功',
                        type: 'success'
                    });
                    this.leibie();
                }).catch();
            },
            /*跳转详情方法*/
            todetails(rows) {
                this.$router.push({
                    path: '/business/details',
                    query: {
                        row: rows
                    }

                })
            },
            mm(v){
                this.leibiexz.parendtId = v.typeId;
                this.leibiexz.categoryLevel = v.categoryLevel+1;
            },

            leibie(){
                this.$axios.get("http://localhost:8088/par/leibie-chaxun").then(v=>{
                    this.myleixinqx=v.data;
                }).catch();
            },
            leibiee(){
                this.$axios.get("http://localhost:8088/par/qtype-chaxun").then(v=>{
                    this.qtypei=v.data;
                }).catch();
            },
        },
        computed:{

        },

    }
</script>

<style scoped>

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        padding-right: 8px;
    }
    .addview:hover{
        color: white;
    }
    a{
        text-decoration: none;
        color: #409EFF;
    }
    a:hover{
        color: white;
    }
    .busin:hover{
        color: #3E84E9;
        cursor:pointer;
    }
    .businame{
        color: #606266;
    }
    .businame:hover{
        color: #409EFF;
        cursor:pointer;
    }
    .operate{
        font-size: 12px;
        height: 40px;
        padding: 0 20px;
        color: #777;
        background: white;
    }
    .selected—title{
        margin-top: 15px;
        margin-left: -6px;
        border-right: 1px solid #e6e6e6;
        width: 86px;
        height:20px;
        float: left;
    }
    .selected—title1{
        margin-top: 15px;
        border-right: 1px solid #e6e6e6;
        width: 86px;
        height:20px;
        float: left;
        cursor: pointer;
    }

    .selected—title1 span{
        margin-left: 24px;
    }
    .selected—title1 span:hover{
        color:#409eff;
    }
    .selected—title2{
        margin-top: 15px;
        border-right: 1px solid #e6e6e6;
        width: 129px;
        height:20px;
        float: left;
        cursor: pointer;
    }

    .selected—title2 span{
        margin-left: 24px;
    }
    .selected—title2 span:hover{
        color:#409eff;
    }
</style>